.pick10Page{
    box-sizing: border-box;
    // .lotteryHeader{
    //     padding: 16rem;
    //     background: #FFF;
    //     display: flex;
    //     align-items: center;
    //     height: 60rem;
    //     justify-content: space-between;
    //     box-sizing: border-box;
    //     .tabItem{
    //         color: #6A778C;
    //         font-size: 16rem;
    //         &.active{
    //             position: relative;
    //             color: #FF2D55;
    //             &::after{
    //                 position: absolute;
    //                 content: "";
    //                 width: 24.5rem;
    //                 height: 5rem;
    //                 background: url("../../assets/images/ColorfulLottery/smile.png") no-repeat;
    //                 background-size: contain;
    //                 transform: translate(-50%, -50%);
    //                 bottom: -12rem;
    //                 left: 50%;
    //             }
    //         }
    //     }
    // }
    .headerTabs {
        :deep(.van-tabs__line) {
            background: url("../../assets/images/ColorfulLottery/smile.png") no-repeat;
            background-size: contain;
            width: 24.5rem;
            height: 5rem;
        }
    }
    .moneyNum{
        padding: 12rem 16rem 12rem 16rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: white;
      
        .moneyItem{
            background: url("../../assets/images/ColorfulLottery/moneyBg.png") no-repeat;
            background-size: contain;
            width: 30rem;
            height: 30rem;
            color: #FF2D55;
            text-align: center;
            font-family: DIN;
            font-size: 12rem;
            line-height: 30rem;
            font-weight: 700;
            &:not(:first-child){
                margin-left: 15rem;
            }
            &.moneyActive{
                background: url("../../assets/images/ColorfulLottery/activeMoneyBg.png") no-repeat;
                width: 30rem;
                height: 30rem;
                background-size: contain;
            }
        }
        .inputMoney{
            display: flex;
            margin-left: 15rem;
            align-items: center;
            position: relative;
            img{
                width: 30rem;
                height: 30rem;
                z-index: 2;
            }
            &>input{
                border-radius: 6rem;
                border: 1rem solid #D8DFE7;
                background: #F1F5F9;
                width: 90rem;
                line-height: 24rem;
                position: absolute;
                left: 20rem;
                text-indent: 10rem;
                color: #FF2D55;
                font-family: DIN;
                font-size: 14rem;
                font-style: normal;
                font-weight: 700;
                ::placeholder {
                    color: #647282;
                    text-align: center;
                    font-family: DIN;
                    font-size: 12rem;
                    font-weight: 500;
                  }
                  &:focus{
                    outline:none;
                  }
            }
        }
    }
    .bottomInfo{
        padding: 16rem;
        box-sizing: border-box;
        margin-bottom: 50rem;
        .countdown{
            border-radius: 12rem;
            padding: 12rem;
            box-sizing: border-box;
            width: 100%;
            background: linear-gradient(93deg, #FF8474 2.79%, #FE5375 100%);
        
            .topTime{
                display: flex;
                align-items: center;
                .leftNum{
                    width: 142rem;
                    color: #FFE8EE;
                    font-family: Inter;
                    font-size: 14rem;
                }
                .dateTime{
                    color: #FFE8EE;
                    font-family: Inter;
                    font-size: 12rem;
                    font-style: normal;
                    font-weight: 500;
                }
                .timeData{
                    display: flex;
                    align-items: center;
                    margin-left: auto;
                    float: right;
                    color: white;
                    .timeInfo{
                        width: 30rem;
                        line-height: 26rem;
                        background: #FFF;
                        border-radius: 8rem;
                        color: #FF2D55;
                        text-align: center;
                        font-family: Inter;
                        font-size: 16rem;
                        font-weight: 600;
                        margin: 0rem 5rem;
                    }
                    :last-child{
                        margin: 0rem 0rem 0 5rem;
                    }
                }
                .resultData{
                    margin-left: 8rem;
                    display: flex;
                    align-items: center;
                    .numItem{
                        background-color: white;
                        width: 20rem;
                        height: 20rem;
                        border-radius: 50%;
                        line-height: 20rem;
                        margin-left: 4rem;
                        text-align: center;
                        color: #FF2D55;
                        font-family: Inter;
                        font-size: 14rem;
                        font-weight: 600;
                    }
                }
            }
            .line{
                height: 1rem;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.20);
                margin: 12rem 0rem;
            }
            .belowData{
                .leftNum{
                    width: 142rem;
                    color: #FFE8EE;
                    font-family: Inter;
                    font-size: 14rem;
                }
                .resultInfo{
                    display: flex;
                    margin-top: 8rem;
                    align-items: center;
                    .dateTime{
                        color: #FFE8EE;
                        font-family: Inter;
                        font-size: 12rem;
                        font-style: normal;
                        font-weight: 500;
                    }
                    .timeData{
                        display: flex;
                        align-items: center;
                        margin-left: auto;
                        float: right;
                        color: white;
                        .timeInfo{
                            width: 30rem;
                            line-height: 26rem;
                            background: #FFF;
                            border-radius: 8rem;
                            color: #FF2D55;
                            text-align: center;
                            font-family: Inter;
                            font-size: 16rem;
                            font-weight: 600;
                            margin: 0rem 5rem;
                        }
                    }
                    .resultData{
                        margin-left: 8rem;
                        display: flex;
                        align-items: center;
                        .numItem{
                            background-color: white;
                            width: 20rem;
                            height: 20rem;
                            border-radius: 50%;
                            line-height: 20rem;
                            margin-left: 4rem;
                            text-align: center;
                            color: #FF2D55;
                            font-family: Inter;
                            font-size: 14rem;
                            font-weight: 600;
                        }
                    }
                }
            }
        }
        .playContainer{
            margin-top: 4rem;
            .playNumberItem{
                margin-top: 8rem;
                width: 100%;
                border-radius: 12rem;
                border-top: 1rem solid #E8E6EF;
                background: #FFF;
                box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);
                .topTitle{
                    border-radius: 12rem 12rem 0rem 0rem;
                    background: #FFEAEF;
                    line-height: 30rem;
                    color: #343C4B;
                    text-align: center;
                    font-size: 14rem;
                    font-weight: 600;
                }
                .content{
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: 12rem;
                    box-sizing: border-box;
                    .left-bar{
                        flex: 1;
                        height: 100%;
                        justify-content: space-evenly;
                        flex-direction: column;
                        font-size: 12rem;
                        width: 15%;
                        div{
                            flex: 1;
                            &:not(:first-child){
                                margin-top: 28rem;
                            }
                        }
                    }
                    .list{
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 10rem 3rem;
                        width: 85%;
                        margin-left: 4rem;
                        .bottomData{
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 11rem;
                            .name{
                                color: #343C4B;
                                font-size: 12rem;
                                width: 15%;
                            }
                            .number{
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                            }
                            .rate{
                                line-height: 28rem;
                                text-align: center;
                                font-size: 14rem;
                                color: #343C4B;
                                font-weight: 600;
                            }
                            .input{
                                border-radius: 6rem;
                                width: 45rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                line-height: 24rem;
                                font-family: DIN;
                                font-size: 14rem;
                                    &:focus{
                                     outline:none;
                                    }
                            }
                        }
                    }
                }
            }
            .playTypeItem{
                margin-top: 8rem;
                width: 100%;
                border-radius: 12rem;
                border-top: 1rem solid #E8E6EF;
                background: #FFF;
                box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);
                .topTitle{
                    border-radius: 12rem 12rem 0rem 0rem;
                    background: #FFEAEF;
                    line-height: 30rem;
                    color: #343C4B;
                    text-align: center;
                    font-size: 14rem;
                    font-weight: 600;
                }
                .bottomData{
                    padding: 12rem;
                    box-sizing: border-box;
                    .name{
                        color: #343C4B;
                        font-size: 12rem;
                        width: 18%;
                    }
                    .marData{
                        width: 24%;
                    }
                    .entertainment{
                        justify-content: space-between;
                    }
                    .dragonPick{
                        :nth-child(2){
                            margin-left: 68rem;
                        }
                    }
                    .firstRow{
                        display: flex;
                        align-items: center;
                        .type{
                            width: 82%;
                            display: flex;
                            align-items: center;
                            
                            .num1{
                                width: 50rem;
                                line-height: 28rem;
                                text-align: center;
                                font-size: 14rem;
                                color: #FFF;
                                border-radius: 6rem;
                                background: linear-gradient(107deg, #FFD56A 0%, #FF8159 81.21%);
                            }
                            .num2{
                                width: 28rem;
                                line-height: 28rem;
                                border-radius: 50%;
                                font-size: 14rem;
                                color: #FFF;
                                font-weight: 600;
                                text-align: center;
                            }
                        }
                    }
                    .secondRow{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 8rem;
                        .Odds{
                            width: 84%;
                            display: flex;
                            align-items: center;
                            height: 30rem;
                            margin-right: 5rem;
                            >div{
                                color: #343C4B;
                                width: 48rem;
                                overflow: hidden;
                                font-size: 14rem;
                                font-weight: 600;
                                text-align: center;
                            }
                        }
                    }
                    .thirdRow{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 8rem;
                        .moneyInfo{
                            width: 84%;
                            display: flex;
                            align-items: center;
                            margin-right: 8rem;
                            .inputMoney{
                                display: flex;
                                align-items: center;
                                width: 45rem;
                                margin-right: 2rem;
                                height: 26rem;
                                &>input{
                                    border-radius: 6rem;
                                    width: 45rem;
                                    border: 1rem solid #D8DFE7;
                                    background: #F1F5F9;
                                    line-height: 24rem;
                                    position: absolute;
                                    font-family: DIN;
                                    font-size: 14rem;
                                        &:focus{
                                        outline:none;
                                        }
                                }
                            }
                            .showMinWidth{
                                width: 37rem;
                                &>input{
                                    width: 37rem;
                                }
                            }
                        }
                    }
                }
            }
            .playTypeLast{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 8rem;
                margin-top: 12rem;
                .itemData{
                    border-radius: 12rem;
                    border: 1rem solid #E8E6EF;
                    background: #FFF;
                    height: 76rem;
                    display: flex;
                    box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);
                    .leftData{
                        border-radius: 12rem 12rem 0rem 0rem;
                        background: #FFEAEF;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 56rem;
                        .orderNum{
                            width: 40rem;
                            line-height: 40rem;
                            border-radius: 50%;
                            color: #FFF;
                            text-align: center;
                            font-family: Inter;
                            font-size: 16rem;
                            font-style: normal;
                            font-weight: 600;
                        }
                    }
                    .rightData{
                        width: 106rem;
                        padding: 12rem 8rem 10rem 6rem;
                        box-sizing: border-box;
                        align-items: center;
                        justify-content: center;
                        .topOdds{
                            display: flex;
                            align-items: center;
                            :nth-child(1){
                                color: #343C4B;
                                font-family: Inter;
                                font-size: 12rem;
                            }
                            :nth-child(2){
                                color: #343C4B;
                                font-family: Inter;
                                width: 55rem;
                                text-align: center;
                                font-size: 14rem;
                                font-weight: 600;
                            }
                        }
                        .bottomMoney{
                            display: flex;
                            align-items: center;
                            margin-top: 8rem;
                            &>div{
                                color: #343C4B;
                                font-family: Inter;
                                font-size: 12rem;
                            }
                            &>input{
                                border-radius: 6rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                width: 35rem;
                                line-height: 28rem;
                                font-family: DIN;
                                font-size: 14rem;
                                font-style: normal;
                                font-weight: 500;
                                margin-left: 6rem;
                                color: #343C4B;
                                  &:focus{
                                    outline:none;
                                  }
                            }
                        }
                    }
                }
            }
            .fourthTypeItem{
                .itemData{
                    margin-top: 16rem;
                    border-radius: 12rem;
                    border: 1rem solid #E8E6EF;
                    background: #FFF;
                    height: 76rem;
                    display: flex;
                    box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);
                    border-radius: 12px;
                    .leftData{
                        background: #FFEAEF;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 76rem;
                        .orderNum{
                            width: 48rem;
                            line-height: 48rem;
                            border-radius: 50%;
                            color: #FFF;
                            text-align: center;
                            font-family: Inter;
                            font-size: 16rem;
                            font-style: normal;
                            font-weight: 600;
                        }
                    }
                    .rightData{
                        padding: 12rem 8rem 12rem 24rem;
                        box-sizing: border-box;
                        align-items: center;
                        justify-content: center;
                        .topOdds{
                            display: flex;
                            align-items: center;
                            :nth-child(1){
                                color: #343C4B;
                                font-family: Inter;
                                font-size: 12rem;
                            }
                            :nth-child(2){
                                color: #343C4B;
                                font-family: Inter;
                                width: 80rem;
                                text-align: center;
                                font-size: 14rem;
                                font-weight: 600;
                                margin-left: 37rem;
                            }
                        }
                        .bottomMoney{
                            display: flex;
                            align-items: center;
                            margin-top: 8rem;
                            &>div{
                                color: #343C4B;
                                font-family: Inter;
                                font-size: 12rem;
                            }
                            &>input{
                                border-radius: 6rem;
                                border: 1rem solid #D8DFE7;
                                background: #F1F5F9;
                                width: 80rem;
                                line-height: 28rem;
                                font-family: DIN;
                                font-size: 14rem;
                                font-style: normal;
                                font-weight: 500;
                                margin-left: 6rem;
                                color: #343C4B;
                                margin-left:37rem;
                                  &:focus{
                                    outline:none;
                                  }
                            }
                        }
                    }
                }
            }
        }
    }
    .betAction{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12rem 16rem 12rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #fff;
        .winningRemark{
            display: flex;
            align-items: center;
            span{
                color: #707A8C;
                font-family: Inter;
                font-size: 14rem;  
                margin-left: 6rem;
            }
        }
        .bet{
            width: 136rem;
            margin-left: 12rem;
        }
        .reset{
            background: #FFE8EE;
            width: 88rem;
            color: #FF2D55;
            border:none;
            margin-left: 25rem;
        }
    }
    .confirmBetPop{
        .popTitle{
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 40rem;
            &>div{
                color: #343C4B;
                font-size: 16rem;
                font-weight: 600;
                background: linear-gradient(174deg, rgba(255, 175, 195, 0.15) 4.56%, #FFF 124.49%);
            }  
            .closeIcon{
                position: absolute;
                top: 10rem;
                right: 10rem;
            }
        }
        .centerContent{
            padding: 16rem 24rem 24rem 24rem;
            box-sizing: border-box;
            .betDetail{
                width: 80%;
                margin: 0 auto;
                .detailRow{
                    .rowWrap {
                        display: flex;
                        flex-direction: column;
                        color: #707A8C;
                        font-size: 14rem;
                        margin-top: 15rem;
                        max-height: 260rem;
                        overflow-y: scroll;
                        .rowData{
                            margin-top: 15rem;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-around;
                        }

                        :first-child{
                            color: #343C4B;
                            margin-left: 2rem;
                        }
                        .money{
                            color: #FF6F1E;
                            margin-left: 18rem;
                        }
                    }
                    &>div{
                        color: #707A8C;
                        font-size: 14rem;
                        margin-top: 15rem;
                        display: flex;
                        :first-child{
                            color: #343C4B;
                            margin-left: 2rem;
                        }
                        .money{
                            color: #FF6F1E;
                            margin-left: 18rem;
                        }
                    }
                    .period{
                        color: #FF2D55 !important;
                    }
                    .totalMoney{
                        color: #FF2D55 !important;
                        text-align: center;
                        font-family: Inter;
                        font-size: 18rem;
                        font-style: normal;
                        font-weight: 600;
                    }
                }
            }
            .operateBtn{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 24rem;
                .cancel{
                    width: 156rem;
                    color: #FF2D55;
                    font-size: 16rem;
                    background: #FFE8EE;
                    border:none;
                }
                .confirm{
                    width: 156rem;
                }
            }
        }
        .remarkContent{
            padding: 16rem;
            box-sizing: border-box;
            .titleName{
                color: #FF2D55;
                font-family: Inter;
                font-size: 14rem;
                font-style: normal;
                font-weight: 600;
                margin-top: 5rem;
            }
            .contentDetail{
                color: #707A8C;
                font-family: Inter;
                font-size: 14rem;
                margin-top: 5rem;
                line-height: 24rem; 
            }
        }
    }
}